<template>
	<z-nav-bar :title="data.data.dictLabel"></z-nav-bar>
	<view v-for="(item, index) in data.list" :key="item.id" class="item-box">
		<view class="flex_sbc">
			<view>{{ item.dictLabel }}</view>
			<view v-if="item.cssClass == '5'" class="add-icon" @click="addTagBox(index)">+</view>
		</view>
		<view v-if="item.cssClass == '4'" class="input-box flex_sbc" @click="itemFun(index)">
			<uni-rate
				allow-half
				:value="(evaluationData['item' + item.dictCode] ? evaluationData['item' + item.dictCode].value : 0) / 2"
				readonly
			/>
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="icon-size-32"></image>
		</view>
		<view v-else-if="item.cssClass == '5'">
			<view v-for="(tag, tindex) in evaluationData['item' + item.dictCode] || []" :key="tindex">
				<view class="tag-title">{{ item.dictLabel }}{{ tindex + 1 }}</view>
				<view v-for="(key, kindex) in keyList" :key="kindex" class="uni-mt-16">
					<view class="flex_sbc">
						<view>
							<text v-if="!kindex" class="uni-red">*</text>
							{{ key.name }}
						</view>
						<image
							v-if="tag[key.key] && tag[key.key].code"
							:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
							class="icon-size-32"
							@click="selTag(kindex, index, tindex)"
						></image>
						<view v-else class="add-button" @click="selTag(kindex, index, tindex)">添加</view>
					</view>
					<view v-if="tag[key.key]" class="flex_fsc uni-mt-16 flex_wrap">
						<view v-for="tagObj in tag[key.key].obj" class="tag">
							{{ tagObj.map((el) => el.dictValue).join('-->') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="input-box flex_sbc" @click="itemFun(index)">
			<view v-if="evaluationData['item' + item.dictCode] &&  evaluationData['item' + item.dictCode].value" class="u-line-1">
				{{ evaluationData['item' + item.dictCode].value
				}}{{ item.cssClass == '3' ? item.dictExtF : item.cssClass == '2' ? item.dictExtS : '' }}
			</view>
			<view v-else class="text">{{ item.dictValue }}</view>
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="icon-size-32"></image>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
	<z-picker
		ref="picker"
		:props="pkData.props"
		:list="pkData.list"
		:title="pkData.title"
		:remark="pkData.remark"
		@change="selItem"
	></z-picker>
	<z-slider
		ref="sliderZdd"
		:value="zsData.value"
		:startEnd="zsData.data"
		:unit="zsData.unit"
		@change="zsSetItem"
	></z-slider>
	<uni-popup ref="inputPopup" type="bottom">
		<view class="top-box flex_sbc">
			<view class="uni-585C66" @click="inputPopup.close()">取消</view>
			<view class="z-font-32">{{ data.list[editIndex].dictLabel }}</view>
			<view class="uni-color-main" @click="saveData">完成</view>
		</view>
		<view class="popup-content">
			<view class="text-w z-font-32">{{ data.list[editIndex].dictValue }}</view>
			<view class="flex_sbc input-box">
				<input
					v-model="data.list[editIndex].value"
					:placeholder="data.list[editIndex].dictExtF"
					style="text-align: left; width: 100%"
				/>
				<view class="text-w flex_sh">{{ data.list[editIndex].dictExtF }}</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="ratingPopup" type="bottom">
		<view class="top-box flex_sbc">
			<view class="uni-585C66" @click="ratingPopup.close()">取消</view>
			<view class="z-font-32">{{ data.list[editIndex].dictLabel }}</view>
			<view class="uni-color-main" @click="saveRatingData">完成</view>
		</view>
		<view class="popup-content flex_cc" style="height: 300rpx; padding: 0">
			<uni-rate allow-half v-model="uniRateValue" size="40" />
		</view>
	</uni-popup>
</template>

<script setup>
import { submitEvaluation } from '@/api/player.js';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance();

const data = reactive(uni.getStorageSync('evaluation-data') || {}),
	evaluationData = reactive({});
if (data.result && data.result.result) Object.assign(evaluationData, JSON.parse(data.result.result).ev);

console.log(data);
// 输入值
const inputPopup = ref();

function saveData() {
	const item = data.list[editIndex.value];
	evaluationData['item' + item.dictCode] = {
		label: item.dictLabel,
		value: item.value,
		code: item.dictCode
	};
	inputPopup.value.close();
}

// 选择item
const picker = ref(''),
	pkData = reactive({
		list: [],
		props: {
			label: 'dictLabel'
		},
		title: '',
		value: '',
		remark: ''
	}),
	editIndex = ref(0);

function itemFun(index) {
	editIndex.value = index;
	const item = data.list[index];
	if (!evaluationData['item' + item.dictCode]) evaluationData['item' + item.dictCode] = { value: '' };
	console.log(item.cssClass);
	if (item.cssClass == '0') {
	} else if (item.cssClass == '1') {
		pkData.list = item.children;
		pkData.title = item.dictLabel;
		pkData.value = '';
		pkData.remark = item.remark;
		that.$nextTick(() => {
			picker.value.open();
		});
	} else if (item.cssClass == '2') {
		zsData.value = evaluationData['item' + item.dictCode].value;
		zsData.data = item.dictExtF;
		zsData.unit = item.dictExtS;
		that.$nextTick(() => {
			sliderZdd.value.open();
		});
	} else if (item.cssClass == '3') {
		data.list[index].value = evaluationData['item' + item.dictCode].value;
		inputPopup.value.open();
	} else if (item.cssClass == '4') {
		uniRateValue.value = evaluationData['item' + item.dictCode].value
			? evaluationData['item' + item.dictCode].value / 2
			: 0;
		ratingPopup.value.open();
	}
}

function selItem(item) {
	console.log(item);
	if (item.cssClass == '1' && item.children && item.children.length) {
		pkData.list = item.children;
		pkData.remark = item.remark;
		pkData.value += `${pkData.value ? '->' : ''}${item.dictLabel}`;
		setTimeout(() => {
			picker.value.open();
		}, 310);
	} else if (item.cssClass == '2') {
		zsData.value = '';
		zsData.data = item.dictExtF;
		zsData.unit = item.dictExtS;
		setTimeout(() => {
			sliderZdd.value.open();
		}, 310);
	} else {
		evaluationData['item' + data.list[editIndex.value].dictCode] = {
			label: data.list[editIndex.value].dictLabel,
			value: `${pkData.value}${pkData.value && '->'}${item.dictLabel}`,
			code: item.dictCode
		};
	}
}

// 滑动选择
const sliderZdd = ref(),
	zsData = reactive({
		value: '',
		data: '',
		unit: ''
	});

function zsSetItem(e) {
	const item = data.list[editIndex.value];
	evaluationData['item' + item.dictCode] = {
		label: item.dictLabel,
		value: e,
		code: item.dictCode
	};
}

// 底部提交按钮
const buts = [
	{
		label: '保存',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	let name = '';
	data.list.forEach((item) => {
		if (item.cssClass == '5' && evaluationData['item' + item.dictCode]) {
			evaluationData['item' + item.dictCode].forEach((el, index) => {
				if (name) return;
				if (!el.descriptionTag || !el.descriptionTag.code) name = item.dictValue + (index + 1);
			});
		}
	});
	if (name) return that.tools.alert(`请选择${name}的问题描述标签`);
	const tmpData = JSON.parse(JSON.stringify(data));
	delete tmpData.result;
	submitEvaluation({
		evaluationId: data.id,
		result: JSON.stringify({ ev: evaluationData, data }),
		type: data.type,
		studentId: data.playerInfo.id,
		score: 0
	}).then((res) => {
		that.tools.alert('保存成功');
		uni.navigateBack();
	});
}

// 评星
const ratingPopup = ref(''),
	uniRateValue = ref(3.5);
function saveRatingData() {
	const item = data.list[editIndex.value];
	evaluationData['item' + item.dictCode] = {
		label: item.dictLabel,
		value: uniRateValue.value * 2,
		code: item.dictCode
	};
	ratingPopup.value.close();
}

// 标签
function addTagBox(index) {
	const item = data.list[index];
	if (!evaluationData['item' + item.dictCode]) evaluationData['item' + item.dictCode] = [];
	evaluationData['item' + item.dictCode].push({});
}

const keyList = [
	{
		name: '添加问题描述标签',
		key: 'descriptionTag'
	},
	{
		name: '添加问题原因',
		key: 'reason'
	},
	{
		name: '添加身体位置',
		key: 'bodyPosition'
	}
];
function selTag(type, index, tindex) {
	const item = data.list[index];
	if ([1, 2].includes(type) && !evaluationData['item' + item.dictCode][tindex].descriptionTag)
		return that.tools.alert('请先选择问题描述标签');
	uni.navigateTo({
		url: `/pages/question/add-item/add-item?type=${type === 2 ? 3 : type}&parentCode=${
			type == 2 ? evaluationData['item' + item.dictCode][tindex].descriptionTag.obj[0][0].dictCode : type == 1 ? evaluationData['item' + item.dictCode][tindex].descriptionTag.code : ''
		}`,
		events: {
			getTag: (tdata) => {
				evaluationData['item' + item.dictCode][tindex][keyList[type].key] = tdata;
				console.log(evaluationData['item' + item.dictCode]);
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import 'base.scss';
</style>
